<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common::jscss"/>
<body>
<div class="layui-fluid">

    <blockquote class="layui-crumb">
        <a th:lay-href="|/msg/temp/listByGroupId.action?groupId=${obj.groupId}|">模板管理</a>&nbsp;&nbsp;/&nbsp;
        <zmn th:text="${obj.name}"/>&nbsp;/&nbsp;
        <zmn>城市配置</zmn>
    </blockquote>

    <div class="layui-card">
        <div th:replace="message/_tab::tab"></div>
        <form method="post" action="" class="layui-form" lay-filter="zmn-from-cities">

            <div class="inline-block" style="float: left;">
                <div class="zmn-2layer-list">
                    <div class="list-left ">
                        <div class="list-item" th:text="全国+':'"></div>
                    </div>
                    <div class="list-right">
                        <div class="right-box">
                            <div class="list-item">
                                <input type="checkbox" name="isNationwide" lay-filter="city-checkbox-filter" value="1" title="全国" level="1"
                                       class="act-nationwide-checkbox city-all-checkbox">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="zmn-2layer-list" th:each="kv : ${allCities}">
                    <div class="list-left">
                        <div class="list-item" th:text="${kv.value} + ':'"></div>
                    </div>
                    <div class="list-right">
                        <div class="right-box">
                            <th:block th:each="children : ${kv.children}" th:with="len=${#strings.length(children.value)}">
                                <div class="list-item">
                                    <input type="checkbox" lay-filter="city" rename="city" class="city"
                                           th:name="'city[' + ${children.key} + ']'"
                                           th:value="${children.key}"
                                           th:title="${children.value}">
                                </div>
                            </th:block>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item submit">
                <label class="layui-form-label" style="width: 0px;"></label>
                <div class="layui-input-block" style="margin-left: 115px;">
                    <button class="layui-btn" lay-submit lay-filter="zmn-submit" id="zmn-submit" th:if="${#authPermit.checkPermit('/msg/temp/addEdit.action')}">保存</button>
                    <button type="button" class="layui-btn-primary layui-btn cancleBtn" onclick="zmnLayUtil.closeThisTabs()">取消</button>
                </div>
            </div>
            <div class="layui-form-item" style="height: 30px;"></div>

        </form>
    </div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    var json = {
        templateId: [[${templateId}]]
        , selectedCities: [[${selectedCities}]]
        , allCities: [[${allCities}]]
    };
    layui.config({
        base: "/static/lay/"
    }).extend({
        index: "lib/index",
    }).use(
        [
            'index'
            , 'form'
        ], function () {
            let form = layui.form;
            let $ = layui.$;
            let totalCity = 0;
            for (let i = 0; i < json.allCities.length; i++) {
                totalCity += json.allCities[i].children.length;
            }
            if (json.selectedCities.length === totalCity) {
                console.debug("初始化全选");
                $(".city-all-checkbox").prop("checked", true);
            }
            form.render();

            let newFormData = {
                templateId: json.templateId
                , cityIds: []
                , allCities: json.allCities
            };
            let oldFormData = {};
            if (json.selectedCities && json.selectedCities.length > 0) {
                let checkbox_startWith = "city[";
                let checkbox_endWith = "]";
                $.each(json.selectedCities, function (i, item) {
                    newFormData.cityIds.push(item.key);
                    let attr = checkbox_startWith + item.key + checkbox_endWith;
                    oldFormData[attr] = true;
                });
            }
            form.val("zmn-from-cities", oldFormData);

            Array.prototype.indexOf = function (val) {
                for (var i = 0; i < this.length; i++) {
                    if (this[i] == val) return i;
                }
                return -1;
            };
            Array.prototype.remove = function (val) {
                var index = this.indexOf(val);
                if (index > -1) {
                    this.splice(index, 1);
                }
            };

            form.on('checkbox(city)', function (data) {
                if (data.elem.checked) {
                    newFormData.cityIds == null ? newFormData.cityIds = new Array() : 1;
                    newFormData.cityIds.push(data.value);
                    if (newFormData.cityIds.sort().toString() === newFormData.allCities.sort().toString()) {
                        $(".city-all-checkbox").prop("checked", true);
                    }
                } else {
                    newFormData.cityIds.remove(data.value);
                    $(".city-all-checkbox").prop("checked", false);
                }
                form.val("zmn-from-cities");
            });

            form.on('submit(zmn-submit)', function (obj) {
                let btnSubmit = $("#zmn-submit");
                console.log(newFormData);
                btnSubmit.addClass('layui-disabled').prop("disabled", true);
                $.ajax({
                    type: "POST",
                    url: "/msg/temp/conf/saveCityConfig.action",
                    dataType: "json",
                    data: {"templateId": newFormData.templateId, "cityIds": newFormData.cityIds},
                    success: function (res) {
                        if (res.status == 200) {
                            layer.msg('保存成功!');
                            // 保存成功 关闭当前页
                            setTimeout(function () {
                                window.location.href = "/msg/temp/conf/configCityByTemplateId.action?templateId=" + json.templateId;
                            }, 500);
                        } else {
                            layer.msg(res.message, {icon: 5, shift: 6});
                        }
                        btnSubmit.removeClass('layui-disabled').prop("disabled", false);
                        return false;
                    }
                });
                return false;
            });
            form.on('checkbox(city-checkbox-filter)', function (data) {
                if (data.elem.checked) {
                    $(".city").prop("checked", true);
                    newFormData.cityIds = new Array();
                    $(".city").each(function(i){
                        newFormData.cityIds.push($(this).val());
                    });
                } else {
                    $(".city").prop("checked", false);
                    newFormData.cityIds.splice(0, newFormData.cityIds.length);
                }
                form.val("zmn-from-cities");
            });

            $(document).on('click', '#zmn-btn-cancel', function () {
                window.location.href = "/msg/temp/conf/configCityByTemplateId.action?templateId=" + json.templateId;
            });
        });

</script>
</html>
